<template>
	<view class="login-container">
		<view class="space-background">
			<!-- 星星背景 -->
			<view class="stars-container">
				<view class="stars stars1"></view>
				<view class="stars stars2"></view>
				<view class="stars stars3"></view>
			</view>
			
			<!-- 行星系统 -->
			<view class="planets-container">
				<!-- 大行星 -->
				<view v-for="i in 3" :key="`large-${i}`" 
					  class="planet large-planet"
					  :style="getLargePlanetStyle(i)"></view>
				
				<!-- 中等行星 -->
				<view v-for="i in 5" :key="`medium-${i}`" 
					  class="planet medium-planet"
					  :style="getMediumPlanetStyle(i)"></view>
				
				<!-- 小行星 -->
				<view v-for="i in 8" :key="`small-${i}`" 
					  class="planet small-planet"
					  :style="getSmallPlanetStyle(i)"></view>
			</view>
		</view>
		<view class="login-box" :class="{ success: isSuccess }">
			<view class="login-title">登录</view>
			
			<view class="input-group">
				<input 
					class="input-item"
					type="text"
					v-model="username"
					placeholder="请输入用户名"
				/>
			</view>
			
			<view class="input-group">
				<input 
					class="input-item"
					type="password"
					v-model="password"
					placeholder="请输入密码"
				/>
			</view>
			
			<button class="login-btn" @click="handleLogin" :disabled="isLoading">
				{{ isLoading ? '登录中...' : '登录' }}
				<view v-if="isLoading" class="loading-spinner"></view>
			</button>

			<view class="register-link">
				还没有账号？
				<text @click="goToRegister" class="register-btn">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('')
const password = ref('')
const isLoading = ref(false)
const isSuccess = ref(false)

const handleLogin = async () => {
	if (isLoading.value) return
	
	isLoading.value = true
	
	try {
		// 模拟登录请求
		await new Promise(resolve => setTimeout(resolve, 2000))
		isSuccess.value = true
		
		// 模拟跳转
		setTimeout(() => {
			// 这里添加你的跳转逻辑
			console.log('登录成功，准备跳转')
		}, 1000)
	} catch (error) {
		console.error('登录失败:', error)
	} finally {
		isLoading.value = false
	}
}

const goToRegister = () => {
	router.push('/register')
}

// 生成随机位置和颜色的函数
const getLargePlanetStyle = (index) => ({
	left: `${15 + index * 30}%`,
	top: `${40 + index * 20}%`,
	background: `linear-gradient(45deg, ${getRandomColor()}, ${getRandomColor()})`,
	animation: `floatLarge${index} ${40 + index * 5}s infinite ease-in-out`
})

const getMediumPlanetStyle = (index) => ({
	left: `${10 + index * 20}%`,
	top: `${30 + index * 15}%`,
	background: `linear-gradient(45deg, ${getRandomColor()}, ${getRandomColor()})`,
	animation: `floatMedium${index} ${30 + index * 3}s infinite ease-in-out`
})

const getSmallPlanetStyle = (index) => ({
	left: `${5 + index * 12}%`,
	top: `${20 + index * 10}%`,
	background: `linear-gradient(45deg, ${getRandomColor()}, ${getRandomColor()})`,
	animation: `floatSmall${index} ${20 + index * 2}s infinite ease-in-out`
})

const getRandomColor = () => {
	const colors = [
		'#ff4500', '#00bfff', '#32cd32', '#9400d3', '#ff8c00',
		'#4169e1', '#98fb98', '#8a2be2', '#daa520', '#00ced1'
	]
	return colors[Math.floor(Math.random() * colors.length)]
}
</script>

<style>
.login-container {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: radial-gradient(ellipse at bottom, #1e2934 0%, #090a0f 100%);
	perspective: 1000px;
	box-sizing: border-box;
}

.space-background {
	position: fixed;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at center, #1B2735 0%, #090A0F 100%);
	overflow: hidden;
}

.planets-container {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	perspective: 2000px;
}

.planet {
	position: absolute;
	border-radius: 50%;
	box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
	background-size: 100% 100%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform;
}

/* 大行星样式 */
.large-planet {
	width: 120px;
	height: 120px;
	z-index: 3;
}

.large-planet:nth-child(1) {
	left: 15%;
	top: 60%;
	animation: floatLarge1 40s infinite ease-in-out;
}

.large-planet:nth-child(2) {
	right: 20%;
	top: 40%;
	animation: floatLarge2 45s infinite ease-in-out;
}

.large-planet:nth-child(3) {
	left: 40%;
	top: 70%;
	animation: floatLarge3 50s infinite ease-in-out;
}

/* 中等行星样式 */
.medium-planet {
	width: 80px;
	height: 80px;
	z-index: 2;
}

.medium-planet:nth-child(1) {
	left: 25%;
	top: 45%;
	animation: floatMedium1 35s infinite ease-in-out;
}

/* 小行星样式 */
.small-planet {
	width: 40px;
	height: 40px;
	z-index: 1;
}

.small-planet:nth-child(1) {
	left: 10%;
	top: 30%;
	animation: floatSmall1 25s infinite ease-in-out;
}

/* 行星漂浮动画 */
@keyframes floatLarge1 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); }
	25% { transform: translate3d(200px, -100px, 150px) rotate(90deg); }
	50% { transform: translate3d(0, -200px, -150px) rotate(180deg); }
	75% { transform: translate3d(-200px, -100px, 150px) rotate(270deg); }
	100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}

@keyframes floatLarge2 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); }
	33% { transform: translate3d(-150px, 150px, -100px) rotate(120deg); }
	66% { transform: translate3d(150px, -150px, 100px) rotate(240deg); }
	100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}

@keyframes floatLarge3 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(-100px, 100px, 200px) rotate(180deg) scale(1.1); }
	100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}

@keyframes floatMedium1 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); }
	33% { transform: translate3d(150px, 150px, 100px) rotate(120deg); }
	66% { transform: translate3d(-150px, -150px, -100px) rotate(240deg); }
	100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}

@keyframes floatSmall1 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(100px, -100px, 50px) rotate(180deg); }
	100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}

/* 行星环效果 */
.planet::after {
	content: '';
	position: absolute;
	top: -10%;
	left: -10%;
	right: -10%;
	bottom: -10%;
	border-radius: 50%;
	background: inherit;
	filter: blur(20px);
	opacity: 0.3;
	z-index: -1;
}

/* 行星光晕效果 */
.planet::before {
	content: '';
	position: absolute;
	top: -20%;
	left: -20%;
	right: -20%;
	bottom: -20%;
	background: inherit;
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.3;
	animation: glowPulse 4s ease-in-out infinite alternate;
}

@keyframes glowPulse {
	0% { opacity: 0.2; transform: scale(1); }
	100% { opacity: 0.4; transform: scale(1.1); }
}

/* 银河系效果优化 */
.galaxy {
	position: fixed;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(2px 2px at 20px 30px, #eef, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 50px 160px, #ddf, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 160px 120px, #ddf, rgba(0,0,0,0)),
		radial-gradient(circle at center,
			rgba(40, 100, 220, 0.2) 0%,
			rgba(30, 80, 180, 0.3) 20%,
			rgba(20, 60, 140, 0.4) 40%,
			rgba(10, 40, 100, 0.5) 60%,
			rgba(0, 20, 60, 0.6) 80%,
			rgba(0, 0, 40, 0.7) 100%);
	animation: rotateGalaxy 240s linear infinite;
	opacity: 0.8;
	transform-origin: center center;
}

/* 科技感光线效果 */
.galaxy::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		linear-gradient(125deg, rgba(0,212,255,0.05) 0%, transparent 40%),
		linear-gradient(-125deg, rgba(0,212,255,0.05) 0%, transparent 40%);
	animation: techGlow 8s ease-in-out infinite alternate;
}

@keyframes techGlow {
	0% {
		opacity: 0.3;
	}
	100% {
		opacity: 0.7;
	}
}

/* 星空背景 */
.stars-container {
	position: fixed;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.stars {
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
}

.stars1 {
	background-image: 
		radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 50px 160px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0));
	background-size: 200px 200px;
	animation: twinkle 4s ease-in-out infinite alternate;
}

.stars2 {
	background-image: 
		radial-gradient(1px 1px at 25px 35px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 45px 75px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 55px 165px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 95px 45px, #fff, rgba(0,0,0,0));
	background-size: 300px 300px;
	animation: twinkle 6s ease-in-out infinite alternate;
}

.stars3 {
	background-image: 
		radial-gradient(1.5px 1.5px at 30px 40px, #fff, rgba(0,0,0,0)),
		radial-gradient(1.5px 1.5px at 50px 80px, #fff, rgba(0,0,0,0)),
		radial-gradient(1.5px 1.5px at 60px 170px, #fff, rgba(0,0,0,0)),
		radial-gradient(1.5px 1.5px at 100px 50px, #fff, rgba(0,0,0,0));
	background-size: 400px 400px;
	animation: twinkle 8s ease-in-out infinite alternate;
}

@keyframes twinkle {
	0% { opacity: 0.3; }
	100% { opacity: 1; }
}

.twinkling {
	position: fixed;
	width: 100%;
	height: 100%;
	background: linear-gradient(125deg,
		rgba(0,212,255,0.03) 0%,
		rgba(0,212,255,0.02) 25%,
		transparent 50%);
	animation: moveTwinkle 20s ease-in-out infinite alternate;
}

@keyframes moveTwinkle {
	0% {
		transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(50%) translateY(50%) rotate(180deg);
	}
}

.login-box {
	width: 300px;
	padding: 25px;
	box-sizing: border-box;
	background: rgba(16, 28, 44, 0.8);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 12px;
	backdrop-filter: blur(10px);
	box-shadow: 
		0 8px 32px 0 rgba(0, 212, 255, 0.1),
		0 0 0 1px rgba(0, 212, 255, 0.1);
	animation: fadeInAndRise 0.8s ease-out;
	position: relative;
	z-index: 10;
}

.login-title {
	font-size: 24px;
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.input-group {
	margin-bottom: 15px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0;
}

.input-item {
	width: 100%;
	height: 40px;
	padding: 0 15px;
	box-sizing: border-box;
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 14px;
	transition: all 0.3s ease;
}

.input-item:focus {
	border-color: rgba(0, 212, 255, 0.5);
	background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

.input-item::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.login-btn {
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	background: linear-gradient(45deg, #00d2ff, #3a7bd5);
	border: none;
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-top: 10px;
	padding: 0;
}

.login-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}

.login-btn:active {
	transform: translateY(1px);
}

.register-link {
	margin-top: 15px;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.register-btn {
	color: #00d2ff;
	margin-left: 5px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.register-btn:hover {
	text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
}

/* 加载动画 */
.loading-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	margin-top: -10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 禁用状态 */
.login-btn:disabled {
	background: linear-gradient(45deg, #99d2e6, #9ab7d5);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 成功动画 */
.login-btn.success {
	background: #00c853;
	transform: scale(0.95);
}

.login-btn.success::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: successRipple 0.6s ease-out;
}

@keyframes successRipple {
	0% {
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		width: 500px;
		height: 500px;
		opacity: 0;
	}
}

/* 登录框成功动画 */
.login-box.success {
	animation: successBox 0.5s ease-out forwards;
}

@keyframes successBox {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(0);
		opacity: 0;
	}
}
</style>
